<template>
  <div>
    <home-common-head class="hide" v-if="!utils.getIsApp()" :title="article_title"></home-common-head>
    <div class="common-header-wrap">
      <mt-header :title="article_title" class="common-header">
        <mt-button slot="left" icon="back" @click="goIndex(0)"></mt-button>
        <mt-button slot="right" style="font-size: 0.8rem" @click="goIndex(1)">
          <i class="iconfont">&#xe6b2;</i>
        </mt-button>
      </mt-header>
    </div>
    <div class="information-detail-main">
      <!-- <div class="detail-title">{{ article_title }}</div> -->
      <div class="information-foot" v-if="article_content">
        <div class="foot-size">{{ gettime(article.article_time) }}</div>
        <div class="foot-size">{{ article.click_count }}人阅读</div>
      </div>
      <!-- @click="setPopupVisible" -->
      <div v-html="article_content" class="html-content"></div>
      <vue-picture-preview ref="mainSrc" :list="rishTextImageList"></vue-picture-preview>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import { getArticleDetail } from "../../../api/homeArticle";
import { Toast } from "mint-ui";
import HomeCommonHead from "../common/HomeCommonHead";
import vuePicturePreview from "vue-picture-preview";
import { homeIndexAdList } from "../../../api/homeindex";
export default {
  name: "Informationdetail",
  components: {
    HomeCommonHead,
    vuePicturePreview,
  },
  data() {
    return {
      type: this.$route.query.type ? this.$route.query.type : "",
      article_title: "",
      article_content: "",
      index: "",
      article: {
        article_time: null,
        click_count: "",
      },
    };
  },
  created: function () {
    console.log(this.type);
    let article_id = this.$route.query.article_id;
    getArticleDetail(article_id)
      .then((res) => {
        console.log(res);
        this.article = res.result;
        this.article_title = res.result.article_title;
        // console.log(typeof this.article_title)
        const regex = new RegExp("<img", "gi");
        this.article_content = res.result.article_content.replace(
          regex,
          `<img style="max-width: 100%; height: auto"`
        );
      })
      .catch(function (error) {
        Toast(error.message);
      });
  },
  mounted() {
    var _this = this;
    $(".html-content").on("click", "img", function (event) {
      for (var i = 0; i < _this.rishTextImageList.length; i++) {
        console.log(_this.rishTextImageList[i].src);
        var _index = _this.rishTextImageList[i].src.indexOf(this.src);
        if (_index >= 0) {
          // console.log(i)
          _this.$refs.mainSrc.show(i);
        }
      }
      // console.log(this.src)
    });
  },
  methods: {
    // setPopupVisible() {
    //   // console.log(this.$refs.mainSrc)
    //   // return
    //   this.$refs.mainSrc.show(0);
    // },
    goIndex(index) {
      if (index) {
        this.$router.push({ name: "HomeIndex" });
      } else {
        this.$router.go(-1);
      }
      //  this.$router.push({ name: "HomeInformation" });
      // if (this.type == "1") {
      //   console.log(1)
      //   this.$router.push({ name: "HomeInformation" });
      // } else {
      //   console.log(2)
      //   this.$router.go(-1);
      // }
    },
    gettime(t) {
      let _time = new Date(t * 1000);
      let year = _time.getFullYear(); // 2017
      let month = _time.getMonth() + 1; // 7
      let date = _time.getDate(); // 10
      let hour = _time.getHours(); // 10
      let minute = _time.getMinutes(); // 56
      let second = _time.getSeconds(); // 15
      return year + "-" + month + "-" + date;
    },
  },
  computed: {
    rishTextImageList: function () {
      const list = [];
      // console.log(this.productDetail)
      if (!!this.article_content) {
        let rishText = this.article_content;
        rishText.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function (
          match,
          src
        ) {
          list.push({ src });
        });
      }
      return list;
    },
  },
};
</script>

<style scoped lang="scss">
.hide {
  display: none;
  // opacity: 0;
}
.information-detail-main {
  // margin-top: 40px;
  padding: 2vw 4vw 0 4vw;
  background: #ffffff;
}
.detail-title {
  flex-wrap: wrap;
  font-size: 0.8rem;
  padding-top: 0.4rem;
  font-weight: bold;
}
.information-foot {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
}
.foot-size {
  font-size: 0.5rem;
  color: #b5b5b5;
}
.html-content {
  font-size: 0.7rem;
  background-color: #ffffff;
}
</style>
